<template>
  <el-form
    ref="orgForm"
    :model="formData"
    :rules="formRules"
    label-width="90px"
  >
    <el-form-item v-if="action === 'edit'" prop="id">
      <input v-model="formData.id" type="hidden">
    </el-form-item>
    <el-form-item label="机构类型" prop="orgType">
      <OrgType v-model="formData.orgType" />
    </el-form-item>
    <el-form-item label="名称" prop="orgName">
      <el-input v-model="formData.orgName" type="text" placeholder="请输入名称" />
    </el-form-item>
    <el-form-item v-if="action == 'edit'" label="编码" prop="orgCode">
      <el-input v-model="formData.orgCode" disabled type="text" placeholder="请输入编码，如：100100" />
    </el-form-item>
    <el-form-item v-if="action != 'addCompany'" prop="pid">
      <input v-model="formData.pid" type="hidden">
    </el-form-item>
    <el-form-item label="排序" prop="seq">
      <el-input-number v-model="formData.seq" :max="99" :min="0" style="width: 100%;" />
    </el-form-item>
    <el-form-item label="描述" prop="orgDesc">
      <el-input v-model="formData.orgDesc" type="textarea" :autosize="{ minRows: 2 }" placeholder="请输入简介" :maxlength="250" />
    </el-form-item>
    <el-form-item label="省" prop="provinceCode">
      <el-select v-model="formData.provinceCode" placeholder="请选择省" style="width:100%" @change="changeCity()">
        <el-option v-for="(key,value,indexs) in dicts.provinces.data" :key="indexs" :label="String(key)" :value="value" />
      </el-select>
    </el-form-item>
    <el-form-item label="市" prop="cityCode">
      <el-select v-model="formData.cityCode" placeholder="请选择市" style="width:100%" @change="getAreas(1)">
        <el-option v-for="(key,value,indexs) in dicts.citys.data" :key="indexs" :label="String(key)" :value="value" />
      </el-select>
    </el-form-item>
    <!-- <el-form-item label="区" prop="areaCode">
      <el-select v-model="formData.areaCode" placeholder="请选择区" style="width:100%" @change="getAreas(2)">
        <el-option v-for="(key,value,indexs) in dicts.areas.data" :key="indexs" :label="String(key)" :value="value" />
      </el-select>
    </el-form-item> -->
  </el-form>
</template>
<script>
import OrgType from '@/components/admin/org-type';
import { get, save, update, getAreaMap, getProvinceAreaMap } from '@/api/admin/org';

export default {
  name: 'OrgForm',
  components: {
    OrgType
  },
  props: {
    action: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      dicts: {
        provinces: { data: { data: [] }},
        citys: { data: { data: [] }},
        areas: { data: { data: [] }}
      },
      formRules: {
        orgName: [
          { required: true, message: '名称不能为空！', trigger: 'blur' }
        ],
        orgCode: [
          { required: true, message: '编码不能为空！', trigger: 'blur' }
        ]
      },
      parentId: null,
      parentId2: null,
      formData: {
        id: null,
        orgType: '0',
        orgName: null,
        orgCode: null,
        pid: null,
        seq: 0,
        orgDesc: null,
        provinceCode: null,
        cityCode: null,
        areaCode: null,
        province: null,
        city: null,
        area: null
      }
    };
  },
  async created() {
    this.dicts.provinces = await getProvinceAreaMap(); // 自定义接口
    // console.info(this.dicts.provinces);
    // this.dicts.gears = await getDict({ code: 'operators' }); // 默认
  },
  methods: {
    getInfo(id) {
      get(id).then(async response => {
        const result = response.data;
        if (result.code === 0) {
          this.formData = result.data;
          this.$set(this.formData, 'cityCode', result.data.cityCode || null);
          this.$set(this.formData, 'provinceCode', result.data.provinceCode || null);
          // this.formData.cityCode = result.data.cityCode || null;
          // this.formData.provinceCode = result.data.provinceCode || null;
          this.formData.orgType = String(result.data.orgType);
          if (result.data.cityCode != null) {
            this.formData.provinceCode = String(result.data.provinceCode);
            await this.getCitys();
            this.formData.cityCode = String(result.data.cityCode);
            if (result.data.cityCode != null) {
              this.getAreas(1);
              if (result.data.areaCode != null) {
                this.formData.areaCode = String(result.data.areaCode);
              }
            }
          }
          console.log(this.formData, 'formData');
        } else {
          this.$notify.error({
            title: result.code,
            message: response.data.msg
          });
        }
      });
    },
    handleSubmit() {
      this.$refs.orgForm.validate((valid) => {
        if (valid) {
          if (this.action === 'add' || this.action === 'addCompany') {
            save(this.formData).then(response => {
              this.handleResult(response.data);
            });
          } else if (this.action === 'edit') {
            update(this.formData).then(response => {
              this.handleResult(response.data);
            });
          }
        }
      });
    },
    handleResult(obj) {
      if (obj.code === 0) {
        this.$notify({
          title: '提示',
          message: obj.msg,
          type: 'success'
        });
        if (typeof (this.$parent.$parent.getDepartmentData) === 'function') {
          this.$parent.$parent.getDepartmentData();
          this.$parent.$parent.customFormInitOption.showModal = false;
        }
        if (typeof (this.$parent.getDepartmentData) === 'function') {
          this.$parent.getDepartmentData();
          this.$parent.customFormInitOption.showModal = false;
        }
        this.reset();
      } else {
        this.$notify.error({
          title: obj.code,
          message: obj.msg
        });
      }
    },
    reset() {
      this.$refs.orgForm.resetFields();
    },
    setPid(pid) {
      this.formData.pid = pid;
    },
    changeCity() {
      this.formData.cityCode = '';
      this.getCitys();
    },
    async getCitys() {
      // 拿省名称
      this.formData.province = this.dicts.provinces.data[(this.formData.provinceCode)];
      this.parentId = this.formData.provinceCode;
      this.$nextTick(() => {
        getAreaMap(this.parentId).then(res => {
          this.dicts.citys = res;
          console.log(this.dicts.citys);
        });
      });
    },
    getAreas(val) {
      if (val === 1) {
        // 拿市名称
        this.formData.city = this.dicts.citys.data[(this.formData.cityCode)];
        this.parentId2 = String(this.formData.cityCode);
        this.$nextTick(() => {
          getAreaMap(this.parentId2).then(res => {
            this.dicts.areas = res;
          });
        });
      } else {
        // 拿区名称
        this.formData.area = this.dicts.areas.data[(this.formData.areaCode)];
      }
    }
  }
};
</script>
